<template>
  <el-select
      v-model="computedRoleIds"
      filterable
      remote
      reserve-keyword
      multiple
      placeholder="请输入关键词"
      :remote-method="loadData"
      :loading="loading"
  >
    <el-option
        v-for="item in dataList"
        :key="item.roleId"
        :label="item.roleName"
        :value="item.roleId"
    />
    <el-option v-if="finish" disabled label="没有更多了" value="xxx"/>
    <el-button v-else @click="loadData('')">下一页</el-button>
  </el-select>
</template>

<script lang="ts" setup>
import {computed, reactive, ref} from "vue";
import {Role, User} from "@/typings";
import {listUser} from "@/api/system/user";
import {listRole} from "@/api/system/role";

const props = defineProps({roleIds: {type: Array, default: ''}})
const emits = defineEmits(['update:roleIds'])

let finish = ref(false)
let loading = ref(false)
let dataList = ref<Role[]>([])
let searchVO = reactive({keyword: '', pageNum: 1, pageSize: 10})

let computedRoleIds = computed({
  get: () => {
    return props.roleIds
  },
  set: (value) => {
    emits('update:roleIds', value)
  }
})
const loadData = (keyword: string) => {
  if (keyword) {
    //新的关键词需要重置 pageNum和finish
    if (keyword !== searchVO.keyword) {
      searchVO.pageNum = 1
      finish.value = false
      dataList.value = []
    }
    searchVO.keyword = keyword
  }
  if (!finish.value) {
    loading.value = true
    listRole(searchVO).then(res => {
      if (res.list.length < searchVO.pageSize) {
        finish.value = true
      }
      loading.value = false
      dataList.value.push(...res.list)
      searchVO.pageNum++
    })
  }
}
loadData('')
</script>

<style scoped>

</style>